<template>
  <div style="position: relative;">
    <div>
      <head-nav :firstTitle="'影像存档'" :subTitle="'影像校对'"></head-nav>
    </div>
    <div class="pl20 bor_bot_5">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="本地数据校对" name="1"></el-tab-pane>
        <!-- <el-tab-pane label="云端数据校对" name="2"></el-tab-pane> -->
      </el-tabs>
    </div>

    <div ref="condationHeight" class="ml20 mt10 position_relative">
      <condition-inquery
        ref="conditionInquery"
        @proofread="proofreadData"
        @recalculateTableHeight="recalculateTableHeight"
        @stopProofread="stopProofread"
        @deleteProofread="deleteProofread"
      />
    </div>

    <div class="btnBox">
      <el-button type="primary" plain @click="exportList"><i class="iconfont mr5">&#xe673;</i>导出列表</el-button>
    </div>

    <el-table
      :data="tableData"
      border
      ref="mytable"
      :header-cell-style="{background: '#F5F5F5',color: '#333'}"
      height="calc(100vh - 200px)"
      highlight-current-row
      @cell-dblclick="dblhandleCurrentChange"
      header-row-class-name="strong"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="错误描述:">
              <span>{{ props.row.error_msg }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        type="selection"
        width="55"
        align="center">
      </el-table-column>
      <el-table-column
        label="序号"
        width="70"
        align="center">
        <template slot-scope="scope">
          {{ orderNum + scope.$index + 1 }}
        </template>
      </el-table-column>
      <!-- <common-table :propData="propData" ></common-table> -->
      <el-table-column
        v-for="(item, index) in propData"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :formatter="item.formatter"
        :show-overflow-tooltip="true"
        align="center">
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div ref="paginationHeight">
      <pagination-tool :total="total" :page.sync="listQuery.page_index" :limit.sync="listQuery.page_size" @pagination="fecthTableData"/>
    </div>
  </div>

</template>
<script>
import HeadTabSwitch from '@/components/common/HeadTabSwitch' // 头部tab
import ConditionInquery from './components/ConditionInquery' // 查询条件
import CommonTable from '@/components/common/CommonTable' // 表格
import PaginationTool from '@/components/common/PaginationTool' // 分页
// import DetailDrawer from './components/DetailDrawer'
// import { ComprehensiveQuery } from '@/api/pacs_template' // 接口
import { recalculateTableHeight } from '@/utils/mixin/filter' // 计算table 高度
import HeadNav from "@/components/common/HeadNav"; // 头部导航
import moment from 'moment';

export default {
  data () {
    return {
      tableHeight: 0,
      propData: [
        { prop: 'id', label: '检查主键', width: 200 },
        { prop: 'patient_name', label: '患者姓名', width: 120 },
        { prop: 'modalities_in_study', label: '检查类型', width: 100 },
        { prop: 'patient_name', label: '检查编号', width: 200 },
        { prop: 'study_date_time', label: '检查时间', width: 200 },
        { prop: 'create_time', label: '创建时间', width: 200 },
        { prop: 'source_aet', label: '来源设备', width: 120 },
        { prop: 'error_msg', label: '错误描述' }
      ],
      tableData: [],
      activeName: '1',

      listQuery: {
        page_index: 1,
        page_size: 20
      },
      formData: {},
      total: 10000,
      DrawerVisible: {
        show: false
      },
      rowItem: {},
      processInterval: null,
      multipleSelection: []
    }
  },
  mixins: [recalculateTableHeight],
  mounted () {
    this.getIMGList();
  },
  computed: {
    orderNum() {
      if(this.listQuery.page_index === 1) {
        return 0
      }else {
        return (this.listQuery.page_index - 1) * this.listQuery.page_size
      }
    }
  },
  methods: {
    handleSelectionChange (val) {
      this.multipleSelection = val.map((item) => {
        return item.id
      })
    },
    async getIMGList () { // 获取列表
      const params = Object.assign({}, this.listQuery)
      const res = await this.$pacsApi.pacsApi.proofreadList(params)
      const { code, data, page } = res
      if (code === 0) {
        this.tableData = data;
        this.total = page.total_count;
      }
    },
    handleClick (tab, event) {
      console.log(this.activeName)
      // this.$router.push(this.settingPath[this.activeName])
    },
    // 获取table数据
    async fecthTableData (searchParams) {
      this.tableData = []
      this.getIMGList()
    },
    async proofreadData (time) {
      const params = {
        start_time: time[0],
        end_time: time[1]
      }
      this.formData = params
      const res = await this.$pacsApi.pacsApi.addProofread(params)
      const { code, data, msg } = res
      if (code === 0) {
        this.$refs.conditionInquery.percentage = 0
        this.processInterval = setInterval(() => {
          this.getMessageProofread()
        }, 3000);
      } else {
        this.$message.error(msg)
      }
    },
    // 获取校对进度
    async getMessageProofread () {
      const res = await this.$pacsApi.pacsApi.getMessageProofread()
      const { code, data } = res
      if (code === 0) {
        this.$refs.conditionInquery.percentage = parseInt((data.complete_count / data.total_count) * 100)
        if (data.complete_count === data.total_count) {
          clearInterval(this.processInterval)
          this.getIMGList()
          this.$message.success('校对成功')
          this.$refs.conditionInquery.isProofreading = false
          this.$refs.conditionInquery.percentage = 0
        }
      }
    },
    dblhandleCurrentChange (val) { // 双击表格进入详情
      this.rowItem = val
      this.DrawerVisible.show = true
    },
    // 导出列表
    async exportList () {
      const res = await this.$pacsApi.pacsApi.proofreadExport()
      let blob = new Blob([res], { type: 'application/octet-stream' })
      const fileName = '影像校对.xlsx'
      if ('download' in document.createElement('a')) { // 非IE下载
        const elink = document.createElement('a')
        elink.download = fileName
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href) // 释放URL 对象
        document.body.removeChild(elink) // 下载完成移除元素
      } else { // IE10+下载
        navigator.msSaveBlob(blob, fileName)
      }
    },
    // 停止校对
    async stopProofread () {
      const res = await this.$pacsApi.pacsApi.stopProofread()
      const { code, msg } = res
      if (code === 0) {
        clearInterval(this.processInterval)
        this.getIMGList()
        this.$refs.conditionInquery.isProofreading = false
        this.$message.success(msg)
      } else {
        this.$message.error(msg)
      }
    },
    // 删除列表
    async deleteProofread () {
      if (!this.multipleSelection.length) {
        this.$message.warning('请选择记录')
        return
      }
      const res = await this.$pacsApi.pacsApi.deleteProofread(this.multipleSelection)
      const { code, msg } = res
      if (code === 0) {
        this.$message.success('删除成功')
        this.getIMGList()
      } else {
        this.$message.error(msg)
      }
    }
  },
  components: {
    HeadTabSwitch,
    ConditionInquery,
    CommonTable,
    PaginationTool,
    HeadNav
    // DetailDrawer
  },
  beforeDestroy () {
    clearInterval(this.processInterval)
  }
}
</script>
<style lang="less" scoped>
  .bor_bot_5 {
    border-bottom: 5px solid #f5f5f5;
  }
  .btnBox {
    position: absolute;
    right: 20px;
    top: 106px;
    button {
      width: 100px;
      height: 32px;
      background-color: #fff;
      border: 1px solid #DCDFE6;
      padding: 0;
    }
  }
  .f18i {
    font-size: 18px!important;
  }
  .el-button+.el-button {
    margin-left: 5px;
  }
  /deep/.el-tabs__nav-wrap::after {
    background-color: #FFF;
  }
  /deep/ .el-table .el-table__fixed {
    height: 100% !important;
  }
  /deep/.el-tabs__header {
    margin: 0 0 0px;
  }
  /deep/.demo-table-expand {
    font-size: 0;
  }
  /deep/.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
    overflow: auto;
  }
  /deep/.el-form-item__content {
    line-height: 32px;
  }
  /deep/.el-form--inline .el-form-item__label {
    line-height: 32px;
  }
  /deep/.el-table__expanded-cell[class*=cell] {
    padding: 5px 10px;
  }
  /deep/.el-table th>.cell {
    padding-left: 14px;
    padding-right: 14px;
  }
</style>
